<template>
	<div class="brand-container">
		<div class="wrap">
			<div class="d-flex jc-center">
				<dv-decoration-10 style="width:33.3%;height:.0625rem;" />
				<div class="d-flex jc-center">
					<dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
					<div class="title">
						<span class="title-text">道滘镇产业空间盘整汇总</span>
						<dv-decoration-6 class="title-bototm" :reverse="true" :color="['#50e3c2', '#67a1e5']"
							style="width:3.125rem;height:.1rem;" />
					</div>
					<dv-decoration-8 :reverse="true" :color="['#568aea', '#000000']"
						style="width:2.5rem;height:.625rem;" />
				</div>
				<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
			</div>

			<section class="mainbox">
				<div class="item left">
					<div class="panel">
						<business />
						<div class="panel-footer"></div>
					</div>
					<br />
					<div class="panel">
						<talent />
						<div class="panel-footer"></div>
					</div>
				</div>
				<div class="item center ">
					<div class="panel" id="centerr">
						<centermap />
						<div class="panel-footer"></div>
					</div>
				</div>
				<div class="item rightt">
					<div class="panel">
						<wordCloud />
						<div class="panel-footer"></div>
					</div>
					<br />
					<div class="panel">
						<zichan />
						<div class="panel-footer"></div>
					</div>
				</div>
			</section>

		</div>

	</div>
</template>

<script>
	import '@/assets/js/flexible'

	export default {
		name: 'Brand',
		components: {},
		data() {
			return {}
		},
		computed: {},
		mounted() {},
		methods: {},

	}
</script>

<style lang="scss" scoped>
	.jc-center {
		display: flex;
		padding-top: 0.0625rem;
	}

	.title {
		position: relative;
		width: 6.6rem;

		text-align: center;
		background-size: cover;
		background-repeat: no-repeat;

		.title-text {
			font-size: 0.3rem;
			position: absolute;
			top: 0.125rem;
			left: 50%;
			color: white;
			transform: translate(-50%);
		}

		.title-bototm {
			position: absolute;
			bottom:-0.025rem;
			left: 50%;
			transform: translate(-50%);
		}
	}

	.wrap {
		background: url(../assets/img/brand/bg-1.png) no-repeat #000;
		background-size: cover;
		line-height: 1.15;
	}


	.mainbox {
		margin-top: 0.125rem;
		display: flex;
		flex: 3;
		width: 100%;
	}

	.showTime {
		position: absolute;
		right: 0.7rem;
		top: 0.4rem;
		color: rgba(126, 240, 255, .7);
		display: flex;
		cursor: pointer;
	}

	#centerr {
		height: 10.9rem;
		width: 10.4rem;
	}


	.panel {
		position: relative;
		height: 5.33rem;
		width: 5.65rem;
		border: 1px solid rgba(25, 186, 139, 0.17);
		padding: 0 0.1875rem 0;
		margin-left: 0.3rem;

		&:before {
			position: absolute;
			top: 0;
			left: 0;
			content: "";
			width: 10px;
			height: 10px;
			border-top: 2px solid #02a6b5;
			border-left: 2px solid #02a6b5;
		}

		&:after {
			position: absolute;
			top: 0;
			right: 0;
			content: "";
			width: 10px;
			height: 10px;
			border-top: 2px solid #02a6b5;
			border-right: 2px solid #02a6b5;
		}

		.panel-footer {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;

			&:before {
				position: absolute;
				bottom: 0;
				left: 0;
				content: "";
				width: 10px;
				height: 10px;
				border-bottom: 2px solid #02a6b5;
				border-left: 2px solid #02a6b5;
			}

			&:after {
				position: absolute;
				bottom: 0;
				right: 0;
				content: "";
				width: 10px;
				height: 10px;
				border-bottom: 2px solid #02a6b5;
				border-right: 2px solid #02a6b5;
			}
		}

		h2 {
			height: 0.6rem;
			line-height: 0.6rem;
			text-align: center;
			color: #fff;
			font-size: 0.225rem;
			font-weight: 400;

			a {
				margin: 0 0.1875rem;
				color: #fff;
				text-decoration: none;
			}
		}

		.chart {
			height: 3rem;
		}
	}

	.end {
		float: right;
	}

	.end img {
		position: relative;
		top: -450px;
	}
</style>
